<template>
	<view class="container">
		<!-- 顶部筛选区域 -->
		<view class="filter-bar">
			<picker :range="sortOptions" @change="onSortChange">
				<view class="filter-item"> <text style="font-weight: 600;">排序：</text> {{ sortOptions[selectedSort] }}
				</view>
			</picker>
			<picker :range="filterOptions" @change="onFilterChange" @confirm="confirmPai">
				<view class="filter-item"><text style="font-weight: 600;">排序： </text>
					{{ filterOptions[selectedFilter] }}
				</view>
			</picker>
		</view>
		<view class="botBox">

			<view v-for="(item,index) in list" :key="index" style="background-color: #fff;"
				class="huang box f f-j--a-c f-j-c">
				<view v-if="item.taskType=='composition'" class="biao f f-a-c f-j-c">
					作文
				</view>
				<view v-else-if="item.taskType=='dictate'" class="biao2 f f-a-c f-j-c">
					听写
				</view>
				<view v-else class="biao3 f f-a-c f-j-c">
					默写
				</view>
				<view class="bodyWen f f-d-c f-j-c">
					<view class="ban">
						{{item.className}} &nbsp;&nbsp;&nbsp;&nbsp;
						{{$u.timeFormat(item.createTime, 'yyyy.mm.dd. hh:MM:ss')}}
						<!-- 	{{$u.timeFormat(item.createTime, 'mm月dd日')}}-{{item.className}}-{{item.taskType=='composition'?'作文':item.taskType=='dictate'?'听写':'默写'}} -->

					</view>
					<view v-if="item.averageScore" class="ban">
						<!-- {{$u.timeFormat(item.createTime, 'yyyy.mm.dd. hh:MM:ss')}} -->
						分数：{{item.averageScore}}
					</view>
					<view v-if="item.averageErrorZiNum" class="ban">
						<!-- {{$u.timeFormat(item.createTime, 'yyyy.mm.dd. hh:MM:ss')}} -->
						平均错字：{{item.averageErrorZiNum}}&nbsp;&nbsp;&nbsp; 全对：{{item.allCorrectNum}}
					</view>

				</view>
				<view class="ok"
					:class="{act:item.taskStatus==1,red:item.taskStatus==0,cheng:item.taskStatus==3,red:item.taskStatus==2,red:item.taskStatus==4}">
					{{item.taskStatus==0?'待扫描':item.taskStatus==1?'批改中':item.taskStatus==2?'待审阅':item.taskStatus==3?'完成':'失败'}}
				</view>
				<!-- v-if="item.taskStatus==2||item.taskStatus==3" -->
				<view @click="goReacut(item.taskId,item)" v-if="item.taskStatus==3" class="chakan f f-a-c f-j-c">
					查看报告
				</view>
			</view>
			<view v-if="list.length==0" class="f f-a-c f-j-c"
				style="height: 200rpx;width: 100%;color: #ccc;font-size: 32rpx;">
				暂无内容
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				sortOptions: ['时间：近-远', '时间：远-近'],
				filterOptions: ['全部', '作文', '听写', '默写'],
				selectedSort: 0,
				selectedFilter: 0,


				taskType: '', //任务类型
				timeStatus: 1 //时间近和远1从近到远
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			// 点击查看报告，去报告页
			async goReacut(id, item) {

				console.log(id, '1111111111');
				if (item.taskType == 'dictation') {
					// 默写
					uni.navigateTo({
						url: '/pages/index/moxie/correctionReportMoXie2?taskId=' + id
					})
				} else if (item.taskType == 'dictate') {
					// 听写
					uni.navigateTo({
						url: '/pages/index/tingxie/correctionReportTingXie2?taskId=' + id
					})
				} else {
					// 作文
					uni.navigateTo({
						url: '/pages/index/correctionReportZuoWen2?taskId=' + id
					})
				}
			},
			async init() {
				let n = await this.$api.reportList({
					teacherId: uni.getStorageSync('teacherId'),
					taskType: this.taskType,
					timeStatus: this.timeStatus
				})
				this.list = n.data
			},
			confirmPai(e) {

				console.log(e, '1111111');
			},
			onSortChange(e) {
				if (e.detail.value == "0") {
					this.timeStatus = 1
				} else if (e.detail.value == "1") {
					// 作文
					this.timeStatus = 0
				}
				this.selectedSort = e.detail.value;
				this.init()
			},
			onFilterChange(e) {
				if (e.detail.value == "0") {
					this.taskType = ''
				} else if (e.detail.value == "1") {
					// 作文
					this.taskType = 'composition'
				} else if (e.detail.value == "2") {
					// 听写
					this.taskType = 'dictate'

				} else if (e.detail.value == "3") {
					// 默写
					this.taskType = 'dictation'
				}
				this.selectedFilter = e.detail.value;
				this.init()
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 30rpx;
		height: 100vh;
		box-sizing: border-box;
		background-color: #fff;
	}

	.botBox {
		height: 90%;
		// background-color: pink;
		overflow: auto;
	}

	.botBox::-webkit-scrollbar {
		width: 0;
		/* 滚动条宽度 */
	}

	.filter-bar {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.filter-item {
		padding: 10rpx 20rpx;
		background: #fff;
		border-radius: 10rpx;
		font-size: 26rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.card {
		background: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
		position: relative;
	}

	.tag {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		padding: 6rpx 20rpx;
		color: #fff;
		border-radius: 20rpx;
		font-size: 24rpx;
	}

	.tag-zuowen {
		background-color: #ff9800;
	}

	.tag-tingxie {
		background-color: #2196f3;
	}

	.tag-moxie {
		background-color: #9c27b0;
	}

	.info {
		margin-top: 50rpx;
		font-size: 26rpx;
		color: #333;
		line-height: 1.6;
	}

	.actions {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.status {
		font-size: 26rpx;
		padding: 4rpx 10rpx;
		border-radius: 6rpx;
	}

	.status-done {
		color: #4caf50;
	}

	.status-reviewing {
		color: #ff9800;
	}

	.status-scanning {
		color: #f44336;
	}

	.btn-view {
		padding: 8rpx 20rpx;
		background-color: #00c853;
		color: #fff;
		border-radius: 20rpx;
		font-size: 26rpx;
	}

	.huang {
		margin-top: 50rpx;

		.biao {
			position: absolute;
			width: 118rpx;
			height: 46rpx;
			top: -10rpx;
			left: -10rpx;
			background: url('/static/home/huang.png') no-repeat center center;
			background-size: 100% 100%;
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}

		.biao2 {
			position: absolute;
			width: 118rpx;
			height: 46rpx;
			top: -10rpx;
			left: -10rpx;
			background: url('/static/home/lan.png') no-repeat center center;
			background-size: 100% 100%;
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}

		.biao3 {
			position: absolute;
			width: 118rpx;
			height: 46rpx;
			top: -10rpx;
			left: -10rpx;
			background: url('/static/home/zi.png') no-repeat center center;
			background-size: 100% 100%;
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}

	.box {
		position: relative;
		height: 176rpx;
		// background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;
	}

	.title {
		display: inline;
		// position: relative;
		font-family: SourceHanSansCN, SourceHanSansCN;
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
		z-index: 2;
		margin-bottom: 24rpx;

		.icon {
			position: relative;
			width: 64rpx;
			height: 24rpx;
			top: 13rpx;
			z-index: 0;
			left: 50rpx;

		}
	}

	.topTab {
		height: 316rpx;
		width: 100%;
		align-items: flex-end;
		margin-bottom: 40rpx;

		.w {
			width: 188rpx;
			height: 230rpx;
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;

		}

		.zuowen {
			background: url('/static/home/1.png') no-repeat center center;
			background-size: 100% 100%;
		}

		.tingxie {
			background: url('/static/home/2.png') no-repeat center center;
			background-size: 100% 100%;
			margin: 0 30rpx;
		}

		.moxie {
			background: url('/static/home/3.png') no-repeat center center;
			background-size: 100% 100%;
		}
	}

	.topImg {
		position: fixed;
		z-index: 1;
		width: 100%;
		height: 492rpx;
		top: 0;
		left: 0;
	}

	.chakan {
		position: absolute;
		bottom: 8rpx;
		right: 10rpx;
		width: 110rpx;
		height: 40rpx;
		background: #05C490;
		border-radius: 10rpx;
		font-family: SourceHanSansCN, SourceHanSansCN;
		font-weight: 400;
		font-size: 22rpx;
		color: #FFFFFF;
	}

	.ok {
		position: absolute;
		right: 10rpx;
		top: 5rpx;
		font-family: "SourceHanSansCN, SourceHanSansCN";
		font-weight: 400;
		font-size: 22rpx;
		color: #4E95FF;
	}

	.ok.act {
		color: #FF6000;
	}

	.ok.red {
		color: #FF2819;
	}

	.ok.cheng {
		color: #4E95FF;
	}


	.bodyWen {
		.ban {
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 500;
			font-size: 28rpx;
			margin-top: 15rpx;
			color: #333333;
		}
	}
</style>